import React from 'react';
import styles from './index.less';
import { Button, InputNumber, Radio, Space } from 'antd';
import { useSetState } from 'ahooks';
import _ from 'lodash';
import { connect } from 'umi';
import { maxPrice, minPrice } from '@/assets';
import classnames from 'classnames';
import { stringToArray } from '@/pages/Tianji/InterprovincialSpotDeclaration/helper';

const inputStyle = { width: 45, margin: '0 3px' };
const SettingBox = ({ planData, selectRowsObj = {}, activeKey, dispatch, disabled }) => {
  const [state, setState] = useSetState({
    checked: 1,
    scale: '',
    value: '',
    price: '',
  });

  const changeChecked = (v) => {
    setState({
      checked: v,
    });
  };

  const changeValue = (v) => {
    setState({
      value: v,
    });
  };

  const changePrice = (v) => {
    setState({
      price: v,
    });
  };

  const changeScale = (v) => {
    setState({
      scale: v,
    });
  };

  const changeValues = (data, index, key, value) => {
    const newData = data;
    if (typeof index === 'number') {
      const setValue = (arr, k, v) => {
        arr?.forEach((i) => {
          i[k] = v;
          if (i.children) {
            setValue(i.children, k, v);
          }
        });
      };
      newData[index][key] = value;
      if (newData[index]?.children) {
        setValue(newData[index].children, key, value);
      }
    } else {
      const indexArr = stringToArray(index);
      const a = indexArr?.[0] || 0;
      const b = indexArr?.[1] || 0;
      const c = indexArr?.[2] || 0;
      if (indexArr?.length === 2) {
        newData[a].children[b][key] = value;
        if (newData[a].children[b]?.children instanceof Array) {
          newData[a].children[b]?.children.forEach((i) => {
            i[key] = value;
          });
        }
      } else if (indexArr?.length === 3) {
        newData[a].children[b].children[c][key] = value;
      }
    }
    return newData;
  };

  const batchSet = () => {
    let data = _.cloneDeep(planData);
    for (let key in selectRowsObj) {
      const strategyData = data?.[+activeKey]?.['strategyList']?.[+key] || {};
      let arr = strategyData?.['details'] || [];
      const selectKeys = selectRowsObj[key] || [];
      selectKeys?.forEach((i) => {
        if (state.checked !== 3) {
          // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
          if (strategyData.electricEnergy === 1) {
            arr = changeValues(arr, i, 'electricType', 1);
          } else {
            arr = changeValues(arr, i, 'electricType', state.checked);
          }
        }
        if (state.checked === 1) {
          // 当限额条件电力选择为按照最大限额申报时，表格内的电力百分比默认为100%，且不可修改
          if (strategyData.electricEnergy === 1) {
            arr = changeValues(arr, i, 'electric1', 100);
          } else {
            arr = changeValues(arr, i, 'electric1', state.scale);
          }
        } else if (state.checked === 2) {
          arr = changeValues(arr, i, 'electric2', state.value);
        } else {
          arr = changeValues(arr, i, 'price', state.price);
        }
      });
      data[+activeKey]['strategyList'][+key]['details'] = arr;
    }
    dispatch({
      type: 'interprovincialSpotDeclaration/setState',
      payload: {
        planData: data,
      },
    });
  };

  return (
    <Space>
      <div className={styles.radio_box}>
        <Radio disabled={disabled} checked={state.checked === 1} onClick={() => changeChecked(1)}>
          电力-比例{' '}
          <InputNumber
            size={'small'}
            max={100}
            min={0}
            controls={false}
            value={state.scale}
            disabled={state.checked !== 1 || disabled}
            onChange={changeScale}
            style={inputStyle}
          />{' '}
          %
        </Radio>
        <div className={styles.line} />
        <Radio
          disabled={disabled}
          style={{ marginLeft: 10 }}
          checked={state.checked === 2}
          onClick={() => changeChecked(2)}
        >
          电力-固定值{' '}
          <InputNumber
            controls={false}
            value={state.value}
            size={'small'}
            onChange={changeValue}
            disabled={state.checked !== 2 || disabled}
            style={inputStyle}
          />{' '}
          MWh
        </Radio>
        <div className={styles.line} />
        <Radio
          disabled={disabled}
          style={{ marginLeft: 10 }}
          checked={state.checked === 3}
          onClick={() => changeChecked(3)}
        >
          电价{' '}
          <InputNumber
            controls={false}
            value={state.price}
            size={'small'}
            onChange={changePrice}
            disabled={state.checked !== 3 || disabled}
            style={inputStyle}
          />{' '}
          元/MWh
        </Radio>
      </div>
      <Button type={'primary'} ghost onClick={batchSet} disabled={disabled}>
        批量设置
      </Button>
    </Space>
  );
};

export default connect(({ interprovincialSpotDeclaration }) => ({
  selectRowsObj: interprovincialSpotDeclaration.selectRowsObj,
  planData: interprovincialSpotDeclaration.planData,
  activeKey: interprovincialSpotDeclaration.activeKey,
}))(SettingBox);
